<div class="row">
  <div class="col-xs-12">
    <div *ngIf="!!node; else noNode">
      <h3>{{node.label}} : {{node.quantity | format}} ({{node.bought | format}})</h3>
      <a [routerLink]="'/main/prest'" class="exit">
        <clr-icon shape="close"></clr-icon>
      </a>
      <div class="line">
        <app-node-line [node]=node></app-node-line>
      </div>
      <clr-tabs>
        <clr-tab>
          <button clrTabLink id="link1">Stats</button>
          <clr-tab-content *clrIfActive>
            <p>
              Node level: {{node.level | format}}
              <br/>
              <span *ngIf="node.level >1; else main">
                This node is producing {{node.prodPerSec | format }} /t
              </span>
              <ng-template #main>
                <span>
                  This is the main currency.
                </span>
              </ng-template>
              <br/>
              <span>
                You are getting {{node.thisPerSec | format}} /t
              </span>
              <br/>
              <span *ngIf="node.level >1">
                Bought bonus: + {{bonus}} %
              </span>
              <br/>
              <span *ngIf="node.level >1">
                Branch bonus: + {{branchBonus}} %
              </span>
              <br/>
              <span *ngIf="node.level >1">
                Sacrifice bonuss: + {{node.sacrificeBonus | format}} %
              </span>
            </p>
          </clr-tab-content>
        </clr-tab>
        <clr-tab *ngIf="sons?.length >0">
          <button clrTabLink id="link1">Children</button>
          <ng-template [(clrIfActive)]="sonsActive">
            <clr-tab-content>
              <app-node-table [nodes]="sons"></app-node-table>
            </clr-tab-content>
          </ng-template>
        </clr-tab>
        <clr-tab *ngIf="node.producer?.length >0">
          <button clrTabLink>Parents</button>
          <ng-template [(clrIfActive)]="parentsActive">
            <clr-tab-content>
              <div class="row">
                <div class="col-xs-12">
                  <app-node-table [nodes]="node.producer"></app-node-table>
                </div>
              </div>
            </clr-tab-content>
          </ng-template>
        </clr-tab>
      </clr-tabs>
    </div>
    <ng-template #noNode>
      <h1>Nothing Selected</h1>
      <p>
        Click on a node.
      </p>
    </ng-template>
  </div>
</div>
